<template>
    <div class="TaskWarp" :class="{teachDivMain:BeginTeaching}">
        <div class="divMain listenPanDuan" @click.stop>
            <div class="divTitle">
                <h2>{{Questions.child.QuestionRemark}}</h2>
            </div>
            <div class="tigan" v-html="listenPanDuantigan(Questions.child,Questions.child.stem)"></div>
            <div class="divContent" :style="{top:divContentTop}">
                <div class="touchMove" @touchstart="TOUCHMOVE" @mousedown="TOUCHMOVE">
                    下拉刷新显示
                </div>
                <div class="boxContent">
                    <swiper class="swiperCont" :options="swiperOption">
                        <div class="swiper-pagination" slot="pagination"></div>
                        <swiper-slide class="swiperItem" v-for="(item,index) in Questions.child.stem"
                                      v-if="isShowChild(Questions.child,item)" :key="item">
                            <div class="smallTtigan" v-html="item.StemContent"></div>
                            <div class="itemWarp">
                                <div :style="itemLineHeight()" class="divItem" v-for="(opts,Index) in item.opts"
                                     :key="opts" style="position: relative;">
                                    {{opts.OptionNumber}}:
                                    <img
                                            :src="opts.OptionContent == 'true'? 'dist/images/true.png' : 'dist/images/false.png'"
                                            alt=""
                                            style="height: 80%;padding-left: 20px;position: absolute;top: 0;bottom: 0;margin: auto">
                                </div>
                                <!--<div class="divItem" v-for="(item,index) in Questions.child.stem[0].opts" style="position: relative;">-->
                                <!--{{item.OptionNumber}}:<img-->
                                <!--:src="item.OptionContent == 'true'? 'dist/images/true.png' : 'dist/images/false.png'"-->
                                <!--alt="" style="height: 80%;padding-left: 20px;position: absolute;top: 0;bottom: 0;margin: auto">-->
                                <!--</div>-->
                            </div>
                        </swiper-slide>
                    </swiper>
                </div>
            </div>
        </div>
        <div class="Close" v-show="!BeginTeaching">
            <i class="el-icon el-icon-close"></i>
        </div>
        <transition enter-active-class="animated zoomIn">
            <bigImg :imgSrc="bigImgInfo" v-if="bigImgInfo.src != ''"></bigImg>
        </transition>
    </div>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
    export default {
        name: "listenPanDuan",
        props: ["Questions"],
        computed: mapGetters([
            'divContentTop',
            'BeginTeaching'
        ]),
        methods: {
            ...mapActions([
                'TOUCHMOVE'
            ]),
            listenPanDuantigan(child, stem){
                for (let i = 0; i < stem.length; i++) {
                    if (stem[i].QuestionTypeCode == child.QuestionTypeCode) {
                        return stem[i].StemContent
                    }
                }
            },
            isShowChild(child, stem){
                if (stem.QuestionTypeCode == child.QuestionTypeCode) {
                    return false
                } else {
                    return true
                }
            },
            itemLineHeight(){
                return {
                    lineHeight: $('.divItem').height() + 'px'
                }
            }
        },
        mounted() {
            var _this = this;

            $('.tigan img').each(function () {
                $(this).upImgSrc()
                $(this).on('dblclick', function () {
                    _this.bigImgInfo.src = $(this).attr('src')
                })
            })
            $('.tigan audio').each(function () {
                $(this).upAudioSrc()
            })

            $('.divContent').height(parseFloat($('.listenPanDuan').height()) - 80)
            $('.tigan').height(parseFloat($('.listenPanDuan').height()) - 80)
            $('.boxContent').height(parseFloat($('.divContent').height()) - 56)
            $('.divItem').css({
                lineHeight: $('.divItem').height() + 'px'
            })

            window.onresize = function () {
                $('.divContent').height(parseFloat($('.listenPanDuan').height()) - 80)
                $('.tigan').height(parseFloat($('.listenPanDuan').height()) - 80)
                $('.boxContent').height(parseFloat($('.divContent').height()) - 56)
                $('.divItem').css({
                    lineHeight: $('.divItem').height() + 'px'
                })
            }
        },
        data () {
            return {
                bigImgInfo: {
                    src: ''
                },
                swiperOption: {
                    // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: true,
                    // swiper configs 所有的配置同swiper官方api配置
                    pagination: '.swiper-pagination',
                    slidesPerView: 1,
                    paginationClickable: true,
                    spaceBetween: 30,
                    loop: true
                }
            }
        }
    }


</script>

<style lang="scss" rel="stylesheet/scss">
    .DanXuanOpts {
        display: inline;
        height: 100%;
        p {
            display: inline;
        }
        img {
            height: 100%;
        }
    }

    .smallTtigan {
        line-height: 60px;
        height: 60px;
        overflow: hidden;
    }
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../../../assets/css/public.scss';

    .TaskWarp {
        height: 90%;
        width: 90%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        .divMain {
            position: absolute;
            overflow: hidden;
            height: 100%;
            width: 100%;
            .divTitle {
                height: 80px;
                background: #fff;
                position: relative;
                box-shadow: 0 10px 20px 2px rgba(197, 208, 218, 0.8);
                h2 {
                    font-size: 20px;
                    line-height: 80px;
                    color: #56545A;
                }
            }
            .tigan {
                font-size: 24px;
                background: #D4D7D9;
                line-height: 2em;
                min-height: 100%;
            }
            .divContent {
                background: #fff;
                position: absolute;
                top: 80px;
                left: 0;
                width: 100%;
                overflow: hidden;
                height: 100%;
                .touchMove {
                    margin: 0 auto;
                    width: 309px;
                    height: 56px;
                    font-size: 16px;
                    background: #81a4ff;
                    border-radius: 0 0 8px 8px;
                    line-height: 56px;
                    text-align: center;
                    color: #fff;
                    font-weight: bold;
                }
                .boxContent {
                    overflow: scroll;
                    .swiperCont {
                        height: 100%;
                        .swiperItem {
                            height: 100%;
                            .itemWarp {
                                height: 80%;
                                overflow: auto;
                                display: flex;
                                flex-direction: column;
                                .divItem {
                                    height: 14%;
                                    margin: 1em auto;
                                    width: 80%;
                                    padding: 0 54px;
                                    border-radius: 20px;
                                    box-shadow: 0 2px 8px 0 #c5d0da;
                                    background: #fff;
                                }
                            }
                        }
                    }
                }
            }
            .current span {
                color: #666;
            }
        }
    }

</style>
